﻿<%@ page contentType="text/html; charset=UTF-8" language="java" %>
<!DOCTYPE html >

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css"
	href="${pageContext.request.contextPath }/css/process/jquery-ui-1.8.4.custom/css/smoothness/jquery-ui-1.8.4.custom.css"
	rel="stylesheet" />

<script type="text/javascript" src="${pageContext.request.contextPath }/js/process/raphael.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/cipher/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/cipher/jquery-ui-1.10.1.custom.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/process/myflow.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/process/myflow.jpdl3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/process/myflow.editors.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/myalert.js"></script>
   
<script type="text/javascript">
	$(function() {
		$('#myflow')
				.myflow(
						{
							basePath : "",
							restore : eval("({states:{rect16:{type:'start',text:{text:'开始'}, attr:{ x:496, y:47, width:100, height:50}, props:{text:{value:'开始'},temp1:{value:''},temp2:{value:''}}},rect17:{type:'task',text:{text:'任务1'}, attr:{ x:499, y:156, width:100, height:50}, props:{text:{value:'任务111'},temp1:{value:''},temp2:{value:''}}},rect18:{type:'fork',text:{text:'分支'}, attr:{ x:499, y:263, width:100, height:50}, props:{text:{value:'分支'},temp1:{value:''},temp2:{value:''}}},rect19:{type:'task',text:{text:'任务2'}, attr:{ x:274, y:362, width:100, height:50}, props:{text:{value:'任务2'},temp1:{value:''},temp2:{value:''}}},rect20:{type:'task',text:{text:'任务3'}, attr:{ x:499, y:365, width:100, height:50}, props:{text:{value:'任务3'},temp1:{value:''},temp2:{value:''}}},rect21:{type:'task',text:{text:'任务4'}, attr:{ x:701, y:364, width:100, height:50}, props:{text:{value:'任务4'},temp1:{value:''},temp2:{value:''}}},rect22:{type:'join',text:{text:'合并'}, attr:{ x:499, y:472, width:100, height:50}, props:{text:{value:'合并'},temp1:{value:''},temp2:{value:''}}},rect23:{type:'end',text:{text:'结束'}, attr:{ x:498, y:593, width:100, height:50}, props:{text:{value:'结束'},temp1:{value:''},temp2:{value:''}}}},paths:{path24:{from:'rect16',to:'rect17', dots:[],text:{text:'TO 任务1',textPos:{x:27,y:-10}}, props:{text:{value:'TO 任务1'}}},path25:{from:'rect17',to:'rect18', dots:[],text:{text:'TO 分支',textPos:{x:39,y:-6}}, props:{text:{value:'TO 分支'}}},path26:{from:'rect18',to:'rect20', dots:[],text:{text:'TO 任务3',textPos:{x:33,y:-8}}, props:{text:{value:'TO 任务3'}}},path27:{from:'rect20',to:'rect22', dots:[],text:{text:'TO 合并',textPos:{x:30,y:-5}}, props:{text:{value:'TO 合并'}}},path28:{from:'rect22',to:'rect23', dots:[],text:{text:'TO 结束',textPos:{x:38,y:-8}}, props:{text:{value:'TO 结束'}}},path29:{from:'rect18',to:'rect19', dots:[{x:316,y:291}],text:{text:'TO 任务2',textPos:{x:0,y:-10}}, props:{text:{value:'TO 任务2'}}},path30:{from:'rect19',to:'rect22', dots:[{x:318,y:498}],text:{text:'TO 合并',textPos:{x:-11,y:11}}, props:{text:{value:'TO 合并'}}},path31:{from:'rect18',to:'rect21', dots:[{x:762,y:283}],text:{text:'TO 任务4',textPos:{x:0,y:-10}}, props:{text:{value:'TO 任务4'}}},path32:{from:'rect21',to:'rect22', dots:[{x:747,y:495}],text:{text:'TO 合并',textPos:{x:30,y:10}}, props:{text:{value:'TO 合并'}}}},props:{props:{name:{value:'新建流程'},key:{value:''},desc:{value:''}}}})"),
							tools : {
								save : {
									onclick : function(data) {
										alert('save:\n' + data);
									}
								}
							}
						});

	});
</script>
<style type="text/css">
body {
	margin: 0;
	pading: 0;
	text-align: left;
	font-family: Arial, sans-serif, Helvetica, Tahoma;
	font-size: 12px;
	line-height: 1.5;
	color: black;
	background-image: url('${pageContext.request.contextPath }/images/process/img/bg.png');
}

.node {
	width: 70px;
	text-align: center;
	vertical-align: middle;
	border: 1px solid #fff;
}

.mover {
	border: 1px solid #ddd;
	background-color: #ddd;
}

.selected {
	background-color: #ddd;
}

.state {
	
}

#myflow_props table {
	
}

#myflow_props th {
	letter-spacing: 2px;
	text-align: left;
	padding: 6px;
	background: #ddd;
}

#myflow_props td {
	background: #fff;
	padding: 6px;
}

#pointer {
	background-repeat: no-repeat;
	background-position: center;
}

#path {
	background-repeat: no-repeat;
	background-position: center;
}

#task {
	background-repeat: no-repeat;
	background-position: center;
}

#state {
	background-repeat: no-repeat;
	background-position: center;
}
</style>
</head>
<body>
<div id="myflow_tools"
	style="position: absolute; top: 10; left: 10; background-color: #fff; width: 70px; cursor: default; padding: 3px;"
	class="ui-widget-content">
<div id="myflow_tools_handle" style="text-align: center;"
	class="ui-widget-header">工具集</div>


<div class="node" id="myflow_save"><img src="${pageContext.request.contextPath }/images/process/img/save.gif" />&nbsp;&nbsp;保存</div>
<div>
<hr />
</div>
<div class="node selectable" id="pointer"><img
	src="${pageContext.request.contextPath }/images/process/img/select16.gif" />&nbsp;&nbsp;选择</div>
<div class="node selectable" id="path"><img
	src="${pageContext.request.contextPath }/images/process/img/16/flow_sequence.png" />&nbsp;&nbsp;转换</div>
<div>
<hr />
</div>
<div class="node state" id="start" type="start"><img
	src="${pageContext.request.contextPath }/images/process/img/16/start_event_empty.png" />&nbsp;&nbsp;开始</div>
<div class="node state" id="state" type="state"><img
	src="${pageContext.request.contextPath }/images/process/img/16/task_empty.png" />&nbsp;&nbsp;状态</div>
<div class="node state" id="task" type="task"><img
	src="${pageContext.request.contextPath }/images/process/img/16/task_empty.png" />&nbsp;&nbsp;任务</div>
	
<div class="node state" id="check" type="task"><img
	src="${pageContext.request.contextPath }/images/process/img/16/task_empty.png" />&nbsp;&nbsp;审核</div>
	
<div class="node state" id="fork" type="fork"><img
	src="${pageContext.request.contextPath }/images/process/img/16/gateway_parallel.png" />&nbsp;&nbsp;分支</div>
<div class="node state" id="join" type="join"><img
	src="${pageContext.request.contextPath }/images/process/img/16/gateway_parallel.png" />&nbsp;&nbsp;合并</div>
<div class="node state" id="end" type="end"><img
	src="${pageContext.request.contextPath }/images/process/img/16/end_event_terminate.png" />&nbsp;&nbsp;结束</div>
<div class="node state" id="end-cancel" type="end-cancel"><img
	src="${pageContext.request.contextPath }/images/process/img/16/end_event_cancel.png" />&nbsp;&nbsp;取消</div>
<div class="node state" id="end-error" type="end-error"><img
	src="${pageContext.request.contextPath }/images/process/img/16/end_event_error.png" />&nbsp;&nbsp;错误</div>
</div>

<div id="myflow_props"
	style="position: absolute; top: 30; right: 50; background-color: #fff; width: 220px; padding: 3px;"
	class="ui-widget-content">
<div id="myflow_props_handle" class="ui-widget-header">属性</div>
<table border="1" width="100%" cellpadding="0" cellspacing="0">
	<tr>
		<td>aaa</td>
	</tr>
	<tr>
		<td>aaa</td>
	</tr>
</table>
<div>&nbsp;</div>
</div>

<div id="myflow"></div>
</body>
</html>